<template>
	<view class="container">
		<h4>选择身份</h4>
		<view class="button_container">
			<button class="button1" :class="{selected: isSelected.identity === 'leader'}" 
				@click="selectIdentity('leader')">团长</button>
			<button class="button2" :class="{selected: isSelected.identity === 'participant'}" 
				@click="selectIdentity('participant')">参与者</button>
		</view>
		<view>
			<h4>运动分类</h4>
			<uni-data-select
				v-model="selectedSport"
			    placeholder="请选择运动分类"
			    :localdata="range"
				class="select"
			></uni-data-select>
		</view>
		<view>
			<h4>运动时间</h4>
			<uni-datetime-picker type="datetime" v-model="datetimesingle"  class="select" />
		</view>
		<view>
			<h4>运动地点</h4>
			<uni-data-select
				v-model="selectedLocation"
			    placeholder="请选择运动区域"
			    :localdata="locations"
				class="select"
			></uni-data-select>
		</view>
		
		<view class="button_container">
			<h4>团的人数</h4>
			<button class="button3" :class="{selected: isSelected.groupSize === '1-2'}" 
				@click="selectGroupSize('1-2')">1-2人</button>
			<button class="button4" :class="{selected: isSelected.groupSize === '3-10'}" 
				@click="selectGroupSize('3-10')">3-10人</button>
			<button class="button5" :class="{selected: isSelected.groupSize === '10-20'}" 
				@click="selectGroupSize('10-20')">10-20人</button>
		</view>
		
		<view class="button_container">
			<button class="button6" @click="resetOptions">重置匹配选项</button>
			<view v-if="this.isSelected.identity==='participant'" style="display: flex;">
				<button class="button8" @click="select">选择匹配</button>
				<button class="button8" @click="match">智能匹配</button>
			</view>
			<view v-else-if="this.isSelected.identity==='leader'">
				<button class="button7" @click="create">创建</button>
			</view>
			<view v-else>
				<button class="button7">请选择身份</button>
			</view>
			</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo')
			// 设置页面标题  
			uni.setNavigationBarTitle({  
				title: '运动匹配'  
			});
			// uni.request({
			// 	url:'' ,// api接口获得运动种类
			// 	method:'GET',
			// 	success: (res) => {
			// 		if (res.data.success){
			// 			this.range = res.data.data
			// 			uni.showToast({
			// 				title: '已成功获得运动数据',
			// 				icon: 'success',
			// 			});
			// 		}else{
			// 			uni.showModal({
			// 				title: '获取失败',
			// 				content: '获取运动时失败',
			// 			});
			// 		}
			// 	},
			// 	fail: () => {
			// 		uni.showModal({
			// 			title: '网络错误',
			// 			content: '无法连接服务器，请检查网络连接！',
			// 		});
			// 	}
			// })
		},
		data() {
			return {
				value: 0,
				range: [
				    { value: 0, text: "篮球" },
				    { value: 1, text: "足球" },
				    { value: 2, text: "游泳" },
				],
				
				datetimesingle: '',
				selectedSport: null,
				selectedTime: null,
				selectedLocation: null,
				isSelected: {
					identity: null,
					groupSize: null,
				},
				locations:[
					{value:0,text:"东区操场"},
					{value:1,text:"西区操场"}
				]
			}
		},
		methods: {
			resetOptions() {
				this.isSelected.identity = null;
				this.isSelected.groupSize = null;
				this.selectedSport = null;
				this.selectedTime = null;
				this.selectedLocation = null;
			},
			match() {
				// 这块的方法要改，一个是创建团队，一个是匹配团队
				if (this.selectedSport !== null && this.selectedTime !== null && this.selectedLocation !== null &&
					this.isSelected.identity !== null && this.isSelected.groupSize !== null) {
					// 根据用户选择的条件进行匹配
					// 这里只是一个简单的示例，实际匹配逻辑可能更复杂
					let matchedResults = this.performMatching(this.selectedSport, this.selectedTime, this.selectedLocation, this.isSelected.identity, this.isSelected.groupSize);
					
					if (matchedResults.length > 0) {
						console.log('匹配成功');
						// 将匹配结果传递给匹配结果页面
						uni.navigateTo({
							url: '/pages/version1/match_result_v1'
						});
					}else {
						console.log('没有找到匹配项');
						uni.navigateTo({
							url: '/pages/version1/match_fail_result_v1'
						});
					}
				} else {
					console.log('匹配失败，请选择所有选项');
					uni.navigateTo({
						url: '/pages/version1/match_fail_result_v1'
					});
				}
			},
			performMatching(selectedSport, selectedTime, selectedLocation, selectedIdentity, selectedGroupSize) {
				// 实现匹配逻辑，根据选择的条件在数据库或其他数据源中查找匹配项
				// 返回匹配结果的数组
				// 这里只是一个简单的示例，实际匹配逻辑可能需要与后端交互或调用其他服务来获取匹配结果
				let matchedResults = [];
			
				// 以下是一个简单的示例，将匹配的结果存储在数组中
				// 你需要根据你的实际需求来实现匹配逻辑
				if (selectedSport === "篮球" && selectedTime === "上午" && selectedLocation === "室内" && selectedIdentity === "leader" && selectedGroupSize === "1-2") {
					matchedResults.push({ name: "匹配结果1" });
				} else if (selectedSport === "足球" && selectedTime === "下午" && selectedLocation === "室外" && selectedIdentity === "participant" && selectedGroupSize === "3-10") {
					matchedResults.push({ name: "匹配结果2" });
				}
				
				return matchedResults;
			},
			selectIdentity(identity) {
				this.isSelected.identity = identity;
			},
			selectGroupSize(size) {
				this.isSelected.groupSize = size;
			},
			
		}
	}
</script>

<style scoped>
	.example-body {
			background-color: #red;
			padding: 10px;
		},
	.container {
		display: flex;
		flex-direction: column;  
		/* align-items: center;  */
		justify-content: center; 
		height: 100%; /* 将容器高度设置为视口高度 */  
		/* width: 96%; */
		margin: 3rpx 3rpx 3rpx 3rpx;
	} 
	.select{
		width: 80%;
		margin-left: 60rpx;
		margin-top: 40rpx;
	}
	.button_container{
		display: flex;	
	}
	h4{
		margin-top: 50rpx;
		margin-left: 60rpx;
	}
	.button1{
		margin-top: 40rpx;
		margin-left: 60rpx;
		border: 1px solid #FFDF00;
		color: #FFDF00;
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button2{
		margin-top: 40rpx;
		margin-left: -160rpx;
		border: 1px solid #FFDF00;
		color: #FFDF00;
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button3{
		margin-top: 140rpx;
		margin-left: -120rpx;
		border: 1px solid #FFDF00;
		color: #FFDF00;
		width: 190rpx;
		height: 60rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button4{
		margin-top: 140rpx;
		margin-left: 5rpx;
		border: 1px solid #FFDF00;
		color: #FFDF00;
		width: 190rpx;
		height: 60rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button5{
		margin-top: 140rpx;
		margin-left: 5rpx;
		border: 1px solid #FFDF00;
		color: #FFDF00;
		width: 190rpx;
		height: 60rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button6{
		margin-top: 140rpx;
		margin-left: 20rpx;
		width: 300rpx;
		height: 66rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button7{
		margin-top: 140rpx;
		margin-right: 30rpx;
		background-color: #FFDF00;
		width: 200rpx;
		height: 66rpx;
		text-align: center;
		line-height: 170%;	
	}
	.button8{
		margin-top: 140rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
		background-color: #FFDF00;
		width: 195rpx;
		height: 66rpx;
		text-align: center;
		line-height: 170%;	
	}
	.selected {
		background-color: #007bff; /* Change to the color you want */
		color: white;
	}
</style>